<template>
  <div class="site-header">
      <div class="site-header-content w1200 flexbox-h align-c just-b">
        <div class="logo fl"><nuxt-link to="/"><img src="@/assets/img/logo.png" alt=""></nuxt-link></div>
        <div class="tabs tl fl">
            <template
            v-for="(item) in menu"
            >
            <nuxt-link
            :to="item.path"
            :key="item.name"
            v-if="item.meta && !item.meta.hideInNav"
            :exact="item.exact"
            >{{ item.meta.title }}</nuxt-link>
            </template>
        </div>

        <div class="search-box fl">
            <input
            type="text"
            @keyup="onSearch"
            maxlength="50"
            v-model="keyWord"
            id="keyWord"
            placeholder="请输入关键词..."
            >
            <label for="keyWord" class="icon-search icon"></label>
            <!-- <div class="key-cover"></div> -->
            <ul class="key-list" v-if="keyWordList && keyWordList.length">
                <li class="key-list-item" @click="$router.push('/article?title=' + item);keyWord = item" :title="item" v-for="item in keyWordList" :key="item">{{ item }}</li>
            </ul>
        </div>
        <div class="setting tr flexbox-h align-c just-s">
            <span>夜间模式</span>
            <el-switch
            style="margin-left:10px;"
            v-model="isNight"
            @change="onNightClick"
            active-color="#00a2ff"
            inactive-color="#333333"
            >
            </el-switch>
        </div>
        <!-- <div class="userinfo flexbox-h align-c tr">
          <div class="avatar">
            <img src="@/assets/img/logo.png" alt="">
          </div>
          <div class="username">boycot</div>
        </div> -->
      </div>
  </div>
</template>

<script>
import routes from '@/config/routes'
export default {
    data () {
        return {
            isNight: false,
            menu: routes,
            keyWord: '',
            activeTab: 'home',
            keyWordList: this.$store.state.keyWordList
        }
    },
    mounted () {
        this.init()
    },
    computed: {
        websiteConfig () {
            return this.$store.state.websiteConfig
        }
        // keyWordList () {
        //     return this.$store.state.keyWordList || []
        // }
    },
    methods: {
        init () {
            if (window.localStorage.getItem('theme')) {
                this.isNight = true
            } else {
                this.isNight = false
            }
            this.$emit('on-night', this.isNight)
        },
        onNightClick () {
            this.$emit('on-night', this.isNight)
            this.isNight && window.localStorage.setItem('theme', this.isNight)
        },
        autoRoll (oCon, step) {
            if (oCon.offsetLeft < -oCon.offsetWidth / 2) {
                oCon.style.left = 0
            }
            if (oCon.offsetLeft > 0) {
                oCon.style.left = -oCon.offsetWidth / 2 + 'px'
            }
            oCon.style.left = oCon.offsetLeft + step + 'px'
        },
        onSearch (e) {
            let keyWordList = this.keyWordList
            if (keyWordList && keyWordList.length) {
                keyWordList = this.keyWordList.filter(el => el.includes(this.keyWord))
                this.keyWordList = keyWordList.length > 0 && this.keyWord ? keyWordList : this.$store.state.keyWordList
            }
            // console.log(this.keyWord, this.$store.state.keyWordList, 'e.keyCode')
            if (e.keyCode === 13) {
                this.$router.push('/article?title=' + this.keyWord)
            }
        }
    }
}
</script>

<style>

</style>
